<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .cone{
      margin: 20px auto;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      /*box-shadow: 0 0 0 5px #888888;*/
      /**
        linear-gradient 使用线性渐变
        conic-gradient 使用锥型渐变
       */
      background:conic-gradient(red 0 60deg,#ffffff 60deg 300deg, red 300deg);
      overflow: hidden;
      transition: all 1s;
    }
    .cone:hover{
      background:conic-gradient(red 0 120deg,#ffffff 180deg 180deg, red 300deg);
    }
    .cone{
      margin: .25rem;
    }


  </style>
</head>
<body>
<!--
  时间：2024年12月9日 10点42分
  关于圆锥的渐变

-->
  <div class="cone">

  </div>
</body>
</html>
